import MainLayout from 'components/HOCs/main-layout';
import { useEffect, useState } from 'react';

import { Status } from '../api/organization/organization';
import OrganizationTable from '../components/shared/tables/organization-table';
import {
    DEFAULT_FILTER_VALUE,
    IFilter,
    SearchSortPagingHeader
} from '../components/shared/tables/search-sort-paging-header';

const OrganisationRequestsManagement = () => {
    const [key, setKey] = useState(0);
    const [filter, setFilter] = useState<IFilter>(DEFAULT_FILTER_VALUE);

    const onApplyFilter = (filter: IFilter) => {
        setFilter({ ...filter });
    };

    useEffect(() => {
        setKey(key + 1);
    }, [filter]);

    return (
        <MainLayout>
            <SearchSortPagingHeader onApplyFilter={onApplyFilter} />
            {key !== 0 && <OrganizationTable key={key} status={Status.Approved} filter={filter} />}
        </MainLayout>
    );
};

export default OrganisationRequestsManagement;
